<template>
	<div class="user">
		<div class="top">
			<el-icon>
				<Avatar />
			</el-icon>
			<span>&nbsp;/会员中心</span>
		</div>
		<div class="bottom">
			<!-- 左侧显示导航区域 -->
			<div class="menu">
				<el-menu class="el-menu-vertical-demo" router :default-active="$route.path">
					<el-menu-item index="/user/certification">
						<el-icon>
							<Postcard />
						</el-icon>
						<span>实名认证</span>
					</el-menu-item>
					<el-menu-item index="/user/order">
						<el-icon>
							<CollectionTag />
						</el-icon>
						<span>挂号订单</span>
					</el-menu-item>
					<el-menu-item index="/user/patient">
						<el-icon>
							<User />
						</el-icon>
						<span>就诊人管理</span>
					</el-menu-item>
					<el-menu-item index="/user/profile">
						<el-icon>
							<Document />
						</el-icon>
						<span>账号信息</span>
					</el-menu-item>
					<el-menu-item index="/user/feedback">
						<el-icon>
							<ChatDotRound />
						</el-icon>
						<span>意见反馈</span>
					</el-menu-item>
				</el-menu>
			</div>
			<!-- 右侧显示会员中心二级路由区域 -->
			<div class="content">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
// 引入图标
import { ChatDotRound, Document, User, CollectionTag, Postcard, Avatar } from "@element-plus/icons-vue"
</script>

<style scoped lang="scss">
.user {
	display: flex;
	flex-direction: column;

	.top {
		display: flex;
		margin-left: 20px;
		color: #7f7f7f;
	}

	.bottom {
		display: flex;

		.menu {
			display: flex;
			flex: 2;
			flex-direction: column;



			.el-menu-vertical-demo {
				:deep(.el-menu-item) {
					padding-left: 25%;
				}
			}
		}

		.content {
			flex: 8;
			padding: 0 10px;
		}
	}
}
</style>